<!-- 集体备课详情 -->
<template>
  <div class="trainingDetails basePage">
    <div class="pageTop">
      <div class="basePageBox">
        <CustomBreadcrumb :breadcrumbList="breadcrumbList"></CustomBreadcrumb>
        <PalyArea v-if="detailsData" :detailsData="detailsData" @updateData="updateData"></PalyArea>
        <Introduce ref="Introduce" v-if="detailsData" :detailsData="detailsData"></Introduce>
      </div>
    </div>
  </div>
</template>

<script>
import CustomBreadcrumb from '@/components/CustomBreadcrumb.vue';
import PalyArea from './components/PalyArea.vue';
import Introduce from './components/Introduce.vue';
import { getTeachDetails } from '@/api/teach.js'
export default {
  name: 'TrainingDetails',
  components: { PalyArea, Introduce, CustomBreadcrumb },
  data() {
    return {
      breadcrumbList: [
        {
          name: '集体备课',
          url: '/teach',
        },
        {
          name: '备课详情',
          url: '',
        },
      ],
      detailsData: null
    };
  },
  computed: {
    queryParams() {
      return this.$route.query;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取详情
    async getData() {
      try {
        let params = {
          objectId: this.queryParams.id,
        };
        const resData = await getTeachDetails(params);
        this.detailsData = resData;
      } catch (error) {
        console.error(error);
      }
    },
    updateData() {
      this.getData();
      this.$refs.Introduce.getTeachFileListFn();
    }
  },
};
</script>

<style lang="scss" scoped>
.trainingDetails {
  padding-bottom: 32px;
  .pageTop {
    padding-top: 24px;
    width: 100%;
    background: linear-gradient(
      146.17deg,
      #fafcff 15.29%,
      #ebf3fe 43.27%,
      $page-background-color 85.13%
    );
    background-size: 100% 913px;
    background-repeat: no-repeat;
    background-position: top;
    box-sizing: border-box;
  }
}
</style>
